<template>
    <div template>
        <bases :tonextlink="tonextlink" title="选择器">
            <van-picker title="标题" :columns="columns" @confirm="onConfirm" @cancel="onCancel" @change="onChange" />
        </bases>
    </div>
</template>

<script>
import bases from './base.vue'
import { showToast } from 'vant';
export default {
    props: ['tonextlink'],
    components: {
        bases
    },
    setup() {
        const columns = [
            { text: '杭州', value: 'Hangzhou' },
            { text: '宁波', value: 'Ningbo' },
            { text: '温州', value: 'Wenzhou' },
            { text: '绍兴', value: 'Shaoxing' },
            { text: '湖州', value: 'Huzhou' },
        ];
        const onConfirm = ({ selectedValues }) => {
            showToast(`当前值: ${selectedValues.join(',')}`);
        };
        const onChange = ({ selectedValues }) => {
            showToast(`当前值: ${selectedValues.join(',')}`);
        };
        const onCancel = () => showToast('取消');

        return {
            columns,
            onChange,
            onCancel,
            onConfirm,
        };
    },
}
</script>
